<script setup lang="ts">
import Top from "@/components/home/top.vue";
import { onMounted, computed, ref } from "vue";
import request from "@/utils/request.ts";
import { ElMessage } from "element-plus";
import { Search } from '@element-plus/icons-vue';
import { require } from "@/utils/getFileUrl.ts";
import { useRouter } from "vue-router";
import { ElPagination } from 'element-plus';

const myGameList = ref([]);
const currentPage = ref(1); // 当前页码
const pageSize = 10; // 每页显示的数据条数，固定为 10

onMounted(() => {
  request.get("/getMyGame")
      .then(response => {
        myGameList.value = response.data; // 假设接口返回全部数据，用长度作为总条数
        console.log(response.data);
      })
      .catch(err => {
        ElMessage.error(err);
      });
});

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(myGameList.value.length / pageSize);
});

// 根据当前页码和每页显示的数据条数，过滤出需要显示的数据
const paginatedGameList = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return myGameList.value.slice(startIndex, endIndex);
});

// 用来实现左侧栏的全部显示/不显示
const isGameListVisible = ref(true);
// 切换游戏 列表显示状态的方法
const toggleGameList = () => {
  isGameListVisible.value = !isGameListVisible.value;
};
// 计算属性，根据状态放回对应的符号
const allButtonText = computed(() => {
  return isGameListVisible.value ? '—' : '+';
});
const router = useRouter();
const gameId = router.currentRoute.value.params.id;
// 软件显示下拉框
let showList = ref(false);
const selectedFilters = ref({
  game: true,
  software: true,
  tool: false,
  collection: true
});
// 搜索框
const searchKeyword = ref('');
// 搜索逻辑（可扩展为接口请求）
const handleSearch = () => {
  console.log('搜索内容：', searchKeyword.value);
  // 实际场景：调用接口过滤游戏列表
};

// 页码改变时的回调函数
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
};
</script>

<template>
  <div class="content myFlex-x">
    <div class="leftSide myFlex-y">
      <div class="home myFlex-x">
        <div class="left">
          主页
        </div>
        <div class="right">
          <div class="button"></div>
        </div>
      </div>
      <div class="sort myFlex-x">
        <div class="left" @mouseenter="showList = true" @mouseleave="showList = false">
          <span>游戏和软件</span>
          <div class="showList myFlex-y" v-if="showList">
            <!-- 游戏 -->
            <label class="item">
              <input type="checkbox" v-model="selectedFilters.game" />
              <span>游戏</span>
            </label>

            <!-- 软件 -->
            <label class="item">
              <input type="checkbox" v-model="selectedFilters.software" />
              <span>软件</span>
            </label>

            <!-- 工具 -->
            <label class="item">
              <input type="checkbox" v-model="selectedFilters.tool" />
              <span>工具</span>
            </label>

            <!-- 按收藏分类 -->
            <label class="item">
              <input type="checkbox" v-model="selectedFilters.collection" />
              <span>按收藏分类</span>
            </label>
          </div>
        </div>
        <div class="right myFlex-x">
          <img src="@/assets/img/时间.png">
          <img src="@/assets/img/播放.png">
        </div>
      </div>
      <!-- 搜索框区域 -->
      <div class="search myFlex-x">
        <!-- 搜索输入框 -->
        <input
            v-model="searchKeyword"
            class="search-input"
            placeholder="按名称搜索"
            @keyup.enter="handleSearch"
        />
      </div>

      <div class="list">
        <div class="list-view ">
          <div class="item1" @click="toggleGameList">
            {{allButtonText}}全部({{myGameList.length}})
          </div>
          <div class="item" v-for="(game, index) in paginatedGameList" :key="index" v-if="isGameListVisible">
            <img :src="require('@/assets/img/' + game.img)">
            <span>{{game.name}}</span>
          </div>
        </div>

      </div>
    </div>
    <div class="rightSide myFlex-x">
      <div class="allGame">
        <div class="allGame-title " style="color: grey">所有游戏({{myGameList.length}})</div>
        <div class="allGame-list">
          <img
              class="gameItem"
              v-for="(game, index) in paginatedGameList"
              :key="index"
              :src="require('@/assets/img/' + game.img)"
          >
        </div>
        <!-- 分页组件 -->
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="myGameList.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "@/assets/css/Store.css";
/* 分页组件样式，使其居中 */
.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 调整分页组件与数据之间的间距 */
}
</style>